<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .goodList {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;

            .list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                & li {
                    width: 19%;
                    font-size: 13px;
                    line-height: 24px;
                    margin-top: 10px;
                    padding: 5px;
                    box-sizing: border-box;

                    &:hover {
                        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.5);
                    }

                    & img {
                        width: 80%;
                        display: block;
                        margin: 0 auto;
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="goodList">
        <ul class="list">
            <!-- <li class="list-item">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif" alt="">
                <p class="price">￥6499.00</p>
                <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
            </li>
            <li class="list-item">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif" alt="">
                <p class="price">￥6499.00</p>
                <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
            </li>
            <li class="list-item">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif" alt="">
                <p class="price">￥6499.00</p>
                <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
            </li>
            <li class="list-item">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif" alt="">
                <p class="price">￥6499.00</p>
                <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
            </li>
            <li class="list-item">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif" alt="">
                <p class="price">￥6499.00</p>
                <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
            </li> -->
        </ul>
    </div>
</body>
<script>
    var ul = document.querySelector(".list");

    var xhr = new XMLHttpRequest();

    xhr.open("get", "http://121.43.116.41/demo/php/searchAllGoods.php", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            console.log("响应正文", result);
            result = JSON.parse(result);
            console.log(result);

            var { list } = result;
            var html = "";
            list.forEach((item) => {
                var { goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="list-item">
                    <img src="${goodsImg}" alt="">
                    <p class="price">￥${goodsPrice}</p>
                    <p class="name">${goodsName}</p>
                </li>`
            })
            ul.innerHTML = html;
        }
    }
</script>

</html>